@charset "UTF-8";
/*!
    2015.05.08 Nelson Kuang
*/
html, body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    -webkit-text-size-adjust:none;
}

.clock {
    width: 200px;
    height: 200px;
    position: relative;
    margin: auto;
}

    .clock .outerCircle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 3px solid black;
        border-radius: 50%;
        -webkit-border-radius: 50%;
    }

    .clock .innerCircle {
        position: absolute;
        top: 18%;
        left: 18%;
        width: 64%;
        height: 64%;
        border: 1px solid black;
        border-radius: 50%;
        -webkit-border-radius: 50%;
    }

    .clock .numbers {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

        .clock .numbers .num {
            font-family: Arial;
            font-size: 20px;
            font-weight: bold;
            color: grey;
            position: absolute;
            text-align: center;
            width: 25px;
            height: 25px;
        }

        .clock .numbers .num1 {
            top: 12%;
            right: 22%;
        }

        .clock .numbers .num2 {
            top: 25%;
            right: 8%;
        }

        .clock .numbers .num3 {
            top: 45%;
            right: 3%;
        }

        .clock .numbers .num4 {
            bottom: 25%;
            right: 8%;
        }

        .clock .numbers .num5 {
            bottom: 7%;
            right: 22%;
        }

        .clock .numbers .num6 {
            bottom: 0;
            left: 45%;
        }

        .clock .numbers .num7 {
            bottom: 7%;
            left: 22%;
        }

        .clock .numbers .num8 {
            bottom: 25%;
            left: 8%;
        }

        .clock .numbers .num9 {
            top: 45%;
            left: 3%;
        }

        .clock .numbers .num10 {
            top: 25%;
            left: 8%;
        }

        .clock .numbers .num11 {
            top: 12%;
            left: 22%;
        }

        .clock .numbers .num12 {
            top: 5%;
            left: 45%;
        }

    .clock .hands {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin: 3px;
    }

    .clock .hand {
        position: absolute;
    }

    .clock .hands .hourHand {
        width: 30%;
        height: 6%;
        background-color: black;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        left: 50%;
        top: 47%;
    }

    .clock .hands .minuteHand {
        width: 46%;
        height: 4%;
        background-color: black;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        left: 50%;
        top: 48%;
    }

    .clock .hands .secondHand {
        width: 64%;
        height: 2%;
        background-color: black;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        left: 34%;
        top: 49%;
    }

    .clock .hands .circle {
        width: 8%;
        height: 8%;
        background-color: silver;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        left: 46%;
        top: 46%;
    }

.desc {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    line-height: 1.5;
    min-width: 200px;
}
